<template>
  <!--size抽屉宽度（或高度）  default 378px 和 large 736px -->
  <a-drawer
      v-model:open="visible"
      ref="employeeDetailModalRef"
      class="edit-drawer modal-fixed-bottom"
      root-class-name="root-customer-drawer"
      width="1000px"
      :closable="false"
      @close="onClose"
  >
    <div class="closeable" @click="onClose">{{ $t('self.closeButton') }}</div>
    <div class="modal-header">{{ $t('self.order.tips19') }}</div>

    <div class="ui-block-container">

        <div class="block-content-wrap base-pl0 base-pr0 base-pt0">
          <table width="100%" border="0" cellpadding="0" cellspacing="0" class="common-table base-mb20">
            <tbody>
            <tr>
              <td class="table-striped">{{ $t('self.order.tips1') }}</td>
              <td>{{ detail.orderNo }}</td>
              <td class="table-striped">{{ $t('self.order.tips22') }}</td>
              <td>{{ detail.orgName }}</td>
              <td class="table-striped">{{ $t('self.order.tips23') }}</td>
              <td>{{ detail.userName }}</td>
            </tr>
            <tr>

              <td class="table-striped">{{ $t('self.order.tips25') }}</td>
              <td>{{ detail.mobile }}</td>
              <td class="table-striped">{{ $t('self.order.tips66') }}</td>
              <td>{{ detail.stationId }}</td>
              <td class="table-striped">{{ $t('self.order.tips26') }}</td>
              <td>{{ detail.stationName }}</td>
            </tr>
            <tr>
              <td class="table-striped">{{ $t('self.businessStation.modal.col14') }}</td>
              <td>{{ detail.vehicle  == 1 ? 'E-CARS' : 'MOTOS'  }}</td>
              <td class="table-striped">{{ $t('self.order.tips31') }}</td>
              <td>{{ detail.cardNo }}</td>
              <td class="table-striped">{{ $t('self.order.tips27') }}</td>
              <td>{{ detail.gunCode }}</td>
            </tr>
            <tr>
              <td class="table-striped">{{ $t('self.order.tips24') }}</td>
              <td>{{ detail.gunNo == 1 ? 'A' : 'B' }}</td>
              <td class="table-striped">{{ $t('self.order.tips29') }}(%)</td>
              <td>{{ detail.startSoc }}</td>
              <td class="table-striped">{{ $t('self.order.tips299') }}(%)</td>
              <td>{{ detail.soc}}</td>

            </tr>
            <tr>
              <td class="table-striped">{{ $t('self.order.tips28') }}(%)</td>
              <td>{{ detail.soc - detail.startSoc }}</td>
              <td class="table-striped">{{ $t('self.order.tips32') }}</td>
              <td>{{ detail.startChargeTime }}</td>
              <td class="table-striped">{{ $t('self.order.tips33') }}(V)</td>
              <td>{{ detail.currentV }}</td>

            </tr>
            <tr>
              <td class="table-striped">{{ $t('self.order.tips34') }}(A)</td>
              <td>{{ detail.currentA }}</td>
              <td class="table-striped">{{ $t('self.order.tips222') }}(Kwh)</td>
              <td>{{ detail.totalChargeQuantity}}</td>
              <td class="table-striped">{{ $t('self.order.tips67') }}</td>
              <td>{{ detail.startChargeTime }}</td>
             
              
            </tr>
            <tr>
              <td class="table-striped">{{ $t('self.order.tips39') }}</td>
              <td>{{ detail.endChargeTime }}</td>
              <td class="table-striped">{{ $t('self.order.tips36') }}</td>
              <td>{{ detail.totalChargeTimes }}</td>
              <td class="table-striped">{{ $t('self.order.tips42') }}</td>
              <td>{{ detail.actualMoney }}</td>

            </tr>
            <tr>
              <td class="table-striped">{{ $t('self.order.tips68') }}</td>
              <td>{{ detail.userAccMoney }}</td>
              <td class="table-striped">{{ $t('self.order.tips47') }}</td>
              <td colspan="5">{{ detail.closingReason }}</td>
            </tr>

            </tbody>
          </table>

        </div>

    </div>

  </a-drawer>
</template>

<script setup>
import { computed, getCurrentInstance, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
const { proxy } = getCurrentInstance()
const $TOOL = proxy.$TOOL
const $T = proxy.$t
const emit = defineEmits(['close','ok'])

const visible = ref(false)
// 模式，add新增，show查看，edit编辑
const mode = ref('add')
const detail = ref({})

onMounted(() => {

})

const onClose = () => {
  visible.value = false
  emit('close')
}

const show = async (record) => {
  mode.value = 'show'
  visible.value = true
  detail.value = { ...record }
  // 返回运营商名称
  // detail.value.orgName = await proxy.getOrgNameByOrgId(record.orgId)
  // 秒转分
  detail.value.totalChargeTimes = proxy.getMinBySeconds(record.totalChargeTimes)
 detail.value.totalChargeQuantity = (record.totalChargeQuantity / 1000).toFixed(2)
  

}

// 子组件中要通过defineExpose将方法暴露给父组件
defineExpose({
  show
})
</script>

<style lang="scss" scoped>
.edit-drawer {
  position: relative;
  .closeable {
    @include closeable;
  }
}
.table-striped{
  font-weight: 700;
}
</style>
